<template>
  <!--
    设置行分组显示方式
    :groupDisplayType="'groupRows'"
    -->
  <!-- groupDisplayType: "singleColumn" "multipleColumns" "groupRows" -->
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type CellStyle, type GridOptions } from 'ag-grid-community'

interface IData {
  orderNo: string
  patientId: string
  name: string
  age: string
  inpatientWard: string
  drugName: string
  drugSpec: string
  drugUsage: string
}

// 单元格居中样式
const cssAuto: CellStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}

import json from './data/row-spanning.json'

const gridOptions = ref<GridOptions<IData>>({
  rowData: json as IData[],
  columnDefs: [
    {
      field: 'orderNo',
      headerName: '订单编号',
      cellStyle: (params) => {
        const style: CellStyle = { ...cssAuto };
        if (params.data?.orderNo === 'o_00000001') {
          style.backgroundColor = '#f0f0f0'
        }
        return style
      },
      spanRows: true,
      sort: 'asc',
      width: 200,
    },
    {
      // 行组样式 https://www.ag-grid.com/vue-data-grid/grouping-group-rows/#custom-cell-renderer
      field: 'patientId',
      headerName: '患者编号',
      rowGroup: true,
      pinned: 'left',
      lockPinned: true,
      hide: true,
      width: 200,
      valueFormatter: (params) => {
        return `患者: ${params.value}`
      },
      spanRows: true,
    },
    { field: 'name', headerName: '患者名称', spanRows: true, cellStyle: cssAuto },
    { field: 'age', headerName: '患者年龄', spanRows: true, cellStyle: cssAuto },
    { field: 'inpatientWard', headerName: '病区' },
    { field: 'drugName', headerName: '药品名称' },
    { field: 'drugSpec', headerName: '药品规格' },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
    { field: 'drugUsage', headerName: '药品剂量', width: 200 },
  ],
  groupHeaderHeight: 100,
  enableCellSpan: true,
  groupDisplayType: 'groupRows',
})

</script>

<style scoped></style>
